<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top:30px ">
            <el-card shadow="hover" class="card">
                <div class="user">
                    <img :src="userImg">
                    <div class="userinfo">
                        <p class="name">Admin</p>
                        <p class="access">管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间:&nbsp;<span>2020-01-01</span></p>
                    <p>上次登录地点:&nbsp;<span>太原</span></p>
                </div>
            </el-card>
            <el-card style="margin-top:80px;" class="table">
                <el-table :data="tableData">
                    <el-table-column v-for="(val,key) in tablelabel" :key='key' :prop="key" :label="val" align="center">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16" style="margin-top:30px">
            <div class="num">
                <el-card v-for="(item,index) in countData" :key="index" :body-style="{display:'flex',padding:0}">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color,color:'#fff'}"></i>
                    <div class="detail">
                        <p class="money">$&nbsp;{{item.value}}</p>
                        <p class="tet">{{item.name}}</p>
                    </div>
                </el-card>
            </div>
            <el-card style="height:280px;width:915px;margin-left:30px">
                <div style="height:280px" ref="echart"></div>
            </el-card>
            <div class="graph">
                <el-card>
                    <div style="height:280px" ref="userEcharts"></div>
                </el-card>
                <el-card>
                    <div style="height:280px" ref="videoEcharts"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { getData } from "../../api/data.js"
import * as echarts from "echarts"
export default {
    name: "home",
    data() {
        return {
            userImg: require('../../assets/images/touxiang.png'),
            tableData: [
            ],
            tablelabel: {
                name: '品牌',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买'
            },
            countData: [
                {
                    name: '今日支付订单',
                    value: 1234,
                    icon: "success",
                    color: '#2ec7c9'
                },
                {
                    name: '今日收藏订单',
                    value: 1234,
                    icon: "star-on",
                    color: '#ffb980'
                },
                {
                    name: '今日未支付订单',
                    value: 1234,
                    icon: "s-goods",
                    color: '#5ab1ef'
                },
                {
                    name: '今日支付订单',
                    value: 1234,
                    icon: "success",
                    color: '#2ec7c9'
                },
                {
                    name: '今日收藏订单',
                    value: 1234,
                    icon: "star-on",
                    color: '#ffb980'
                },
                {
                    name: '今日未支付订单',
                    value: 1234,
                    icon: "s-goods",
                    color: '#5ab1ef'
                },
            ]
        }
    },
    mounted() {
        getData().then(res => {
            const { code, data } = res.data
            if (code === 20000) {
                this.tableData = data.tableData
                const order = data.orderData
                const xData = order.date
                const keyArray = Object.keys(order.data[0])
                const series = []
                keyArray.forEach(key => {
                    series.push({
                        name: key,
                        data: order.data.map(item => item[key]),
                        type: 'line'
                    })
                })
                //折线图
                const option = {
                    xAxis: {
                        data: xData
                    },
                    yAxis: {},
                    legend: {
                        data: keyArray
                    },
                    series
                }
                const E = echarts.init(this.$refs.echart)
                E.setOption(option)

                //用户图
                const userOption = {
                    title: {
                        text: '数据分析',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新增用户', '活跃用户']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: data.userData.map(item => item.data)
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    color: ['#2ecc71', '#ff6348'],
                    series: [
                        {
                            name: '新增用户',
                            type: 'bar',
                            data: data.userData.map(item => item.new),
                        },
                        {
                            name: '活跃用户',
                            type: 'bar',
                            data: data.userData.map(item => item.active),
                        }
                    ]
                }
                const U = echarts.init(this.$refs.userEcharts)
                U.setOption(userOption)

                //饼图
                const videoOption = {
                    title: {
                        text: '品牌分析'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '50%',
                            data: data.videoData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                const V = echarts.init(this.$refs.videoEcharts)
                V.setOption(videoOption)
            }
            // console.log(res);
        })
    }
}
</script>

<style lang="scss" scoped>
.card {
    width: 400px;
    border-radius: 30px;
    height: 210px;
    margin-left: 50px;
}

.table {
    width: 400px;
    margin-left: 50px;
    border-radius: 30px;
}

.num {
    display: flex;
    flex-wrap: wrap;

    .el-card {
        height: 60px;
        width: 250px;
        margin: 0 50px 20px 30px;
        border-radius: 10px;

        i {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
            margin-right: 15px;
        }

        .money {
            font-size: 24px;
            padding: 10px 0 5px 0;
        }

        .tet {
            font-size: 12px;
            color: #aaa
        }

    }
}

.user {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    border-bottom: 1px solid #ccc;

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .userinfo {
        padding-left: 100px;
        padding-top: 22px;

        .name {
            padding-bottom: 20px;
            font-weight: 700;
        }
    }
}

.login-info {
    padding: 5px;
    text-align: left;

    p {
        padding: 5px;
    }
}

.graph {
    margin-top: 15px;
    display: flex;
    margin-left: 30px;

    .el-card {
        height: 280px;
        width: 400px;
        margin-right: 113px;
    }
}
</style>